<div>
  <h2>代码分片 <i>code spliting</i></h2>
  <h3>简介</h3>
  <div>
    实现高性能应用最重要的一点就是尽可能地让用户每次都加载必要的资源。优先不太高的资源则采用按需加载等渐进式的获取，这样可以保证首屏加载速度
  </div>
  <div>
    webpack4.0 SplitChunkPlugin 可以实现把代码按特定形式拆分，使得用户不必一次性全部加载，而是按需加载
  </div>

  <h3>SplitChunkPlugin</h3>
  <ul>
    <li>代码拆分： 根据条件，将公用模块拆分出来，形成一个单独的 JS。只引入一次，减少资源体积</li>
    <li>异步加载： 配置 chunk 参数为 all 即可。<span>总共可配置是否只针对入口生效initial，异步 async，同时开启 all，也是用的最多的</span></li>
    <li>
      异步加载也叫按需加载
    </li>
  </ul>

  <h3>异步加载</h3>
  <ul>
    <li>
      异步加载使用 import()<span>(这里不是 ES6 模板语法的 import)</span>,返回一个 Promise 对象
    </li>
    <li>经常被用在框架路由设置</li>
    <li>
      ES6 的 import只能用在顶层，而这个 异步加载的 import 可以用在任何地方
    </li>
    <li>
      异步加载的模块可以通过<span>特有注释</span>来命名异步模块的名字。这时候需要配置 <span>output.chunkFilename</span> 为[name].js
    </li>
  </ul>
</div>